<template>
  <div>
    <Back :title="$t('checkContainer.checkContainer')"></Back>
    <div class="content">
      <button class="btn1" :class="this.state === 0 ? 'btnactive' : ''" @click="() => {this.state = 0}">树形</button>
      <button class="btn2" :class="this.state === 1 ? 'btnactive' : ''" @click="() => {this.state = 1}">文本</button>
      <div class="data">
        <div v-show="state === 0">
          <json-tree :raw="itemTree" :level="1"></json-tree>
        </div>
        <pre v-show="state === 1">
          {{ item }}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import post from '@/utils/post'
import Back from '@/components/Back'
// 建立json树的插件
import JsonTree from 'vue-json-tree'
Vue.component('json-tree', JsonTree)
export default {
  data () {
    return {
      item: null,
      state: 0
    }
  },
  computed: {
    // 转化为json字符串
    itemTree: function () {
      return JSON.stringify(this.item)
    }
  },
  mounted () {
    // 获取容器的详细信息
    const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/json"`
    post({ docker }, (res) => {
      this.item = res
    }, this)
  },
  components: {
    Back
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-top: 20px;
}
.btn1,
.btn2{
  height: 30px;
  width: 63px;
  color: #fff;
  background: #067FB5;
}
.btn1{
  border-radius: 5px 0px 0px 5px;
}
.btn2{
  border-radius: 0px 5px 5px 0px;
}
.btnactive{
  background: #045C82;
}
.data{
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  margin-top: 20px;
}
</style>
